<template>
  <view>
    <cu-cell
      :title="label"
      :required="required"
      link
      :placeholder="placeholder"
      @click="open"
      :description="description"
    ></cu-cell>
    <uni-drawer ref="userDrawer" mode="right" :mask-click="true" :width="330" @change="change">
      <view>
        <view class="header">
          <search ref="sea" @confirm="confirmSearch" />
        </view>
        <view>
          <scroll-view scroll-y="true" class="user-scroll-wrap">
            <view class="container-list">
              <u-gap bgColor="#F5F5F5" height="8"></u-gap>
              <view
                class="common"
                v-for="(item, index) in userListData"
                @click="handleUserClick(item, index)"
                :key="item.userId"
              >
                <label class="info-content">
                  <view class="uni-inline-item">
                    <!-- 单选 -->
                    <view>
                      <image
                        v-if="isUserSelect(item)"
                        class="select-icon"
                        src="/static/images/work/dbd/selected_yes.png"
                        mode="aspectFit"
                      ></image>
                      <image
                        v-else
                        class="select-icon"
                        src="/static/images/work/dbd/selected_no.png"
                        mode="aspectFit"
                      ></image>
                    </view>
                    <view class="user-icon-wrap">
                      <image v-if="item.avatar" class="user-icon" :src="staticUrl + item.avatar" mode="aspectFit">
                      </image>
                      <image v-else class="user-icon" src="/static/images/default_avatar_icon.png" mode="aspectFit">
                      </image>
                    </view>
                    <view class="dept-name"> {{ item.userName }}</view>
                  </view>
                </label>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="btn box_sizing">
          <view class="bottom-btn-wrap">
            <view class="selected-text" v-if="userCheckList.length > 0"> 已选择：{{ userCheckList[0].userName }} </view>
            <view class="selected-text" v-else>未选择</view>
            <u-icon class="arrow-up" name="arrow-up" size="12" color="#88B4C4"></u-icon>
            <button class="confirm-btn" type="primary" @click.stop="backConfirm">确定</button>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
import { getAllUser } from '@/api/duty-basic/duty-meeting.js'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import search from './search/index.vue'
import { staticUrl } from '@/config.js'
export default {
  name: 'UserSelector',
  components: {
    CuCell,
    search
  },
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: [Number, Array, String]
    },
    placeholder: String,
    label: String,
    title: String,
    meetingId: String,
    required: {
      type: Boolean,
      default: false
    },
    // 排除的用户ID
    excludeIds: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      staticUrl,
      searchKey: '',
      userCheckList: [],
      userListData: []
    }
  },
  methods: {
    change(flag) {
      if (!flag && !this.userCheckList.length) this.$emit('remove')
    },
    // 人员点击处理
    handleUserClick(item, index) {
      this.userRadioClick(item, index)
    },
    // 人员单选
    userRadioClick(item) {
      const index = this.userCheckList.findIndex((u) => u.userId === item.userId)
      if (index > -1) {
        this.userCheckList.splice(index, 1)
        return
      }
      this.$set(this, 'userCheckList', [{ ...item }])
    },
    async backConfirm() {
      this.update()
      this.$refs.userDrawer.close()
    },
    async confirmSearch(val) {
      const { data = [] } = await getAllUser(this.meetingId, val || '')
      const excludeIds = this.excludeIds.filter((item) => item != this.userCheckList[0]?.userId)
      this.userListData = data.filter((item) => !excludeIds.includes(item.userId))
    },
    open() {
      this.userListData = []
      this.searchKey = ''
      this.$refs.userDrawer.open()
      this.confirmSearch()
    },
    update() {
      const val = this.userCheckList.length ? this.userCheckList[0].userId : undefined
      this.$emit('update:value', val)
    }
  },
  computed: {
    isUserSelect() {
      return (item) => {
        const userCheckList = this.userCheckList
        if (userCheckList.length == 0) {
          return false
        }
        const i =
          userCheckList.findIndex((e) => {
            return item.userId == e.userId
          }) > -1
        return i
      }
    },
    description() {
      return this.userCheckList.map((item) => item.userName).join(',')
    }
  },
  watch: {
    value(val) {
      if (!val) this.userCheckList = []
    }
  }
}
</script>
<style lang="scss" scoped>
.example-body {
  padding: 10px;
}

.scroll-view {
  /* #ifdef H5 */
  padding-top: 88rpx;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
}

// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100vh - 150rpx - var(--status-bar-height) - constant(safe-area-inset-top));
  height: calc(100vh - 150rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #ifdef H5 */
  height: calc(100vh - 238rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #endif */
}

.info {
  padding: 15px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.info-content {
  padding: 5px 15px;
}

.close {
  padding: 10px;
}

.rawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40rpx;
  width: 100%;
}
.drawer-img {
  width: 40rpx;
  height: 40rpx;
}

.flex_between_center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkbox {
  position: relative;
  margin-left: 10rpx;
  margin-right: 0px;
  .color {
    color: #00aaff;
    background-color: #00aaff;
  }
  .txt {
    font-size: 44rpx;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
.checkBorder {
  border: 1px solid #ecdee4;
}
.header {
  width: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 9999;
  .title {
    height: 90rpx;
    padding: 0 32rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #666666;
    font-weight: 500;
  }
}
.iconclass {
  display: inline-block;
  margin: 0 12rpx;
  color: #d0d4db;
  font-size: 28rpx;
}
.container-list {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 100rpx;
  .common {
    background-color: #fff;
    border-bottom: 1rpx solid #f4f4f4;
    .content {
      display: flex;
      align-items: center;
      height: 60rpx;
      width: 100%;
      padding: 15rpx 0;
      position: relative;
      font-size: 32rpx;
      .lable-text {
        margin-left: 16rpx;
        font-size: 30rpx;
        color: #5b5757;
        width: 500rpx;
        word-break: break-all;
      }
      .right {
        position: absolute;
        right: 30rpx;
        color: #babdc3;
        font-size: 32rpx;
      }
    }
  }
}
.active {
  color: #4297ed !important;
}
.none {
  color: #666666;
}
.icon-selected {
  color: #0095f2 !important;
  font-size: 40rpx !important;
}
.icons {
  color: #0095f2 !important;
  font-size: 40rpx !important;
}
.inline-item {
  display: inline-block;
}

.content-item {
  display: flex;
  position: relative;
  align-items: center;
}

.box_sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn {
  position: fixed;
  bottom: 0;
  padding: 10px;
  background-color: #fff;
  opacity: 0.9;
  width: 100%;
  .bottom-btn-wrap {
    display: flex;
    align-items: center;
    .selected-text {
      flex: 1;
      font-size: 24rpx;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .arrow-up {
      padding-left: 20rpx;
    }
    .confirm-btn {
      font-size: 32rpx;
      margin-left: 20rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #2ac0c8;
      color: #fff;
      border-radius: 0;
      min-width: 200rpx;
      &:after {
        display: none;
      }
    }
  }
}

.select-all-wrap {
  display: flex;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  padding: 30rpx;
}

.select-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx 24rpx 30rpx;

  .dept-icon-wrap {
    background: #f4f5f9;
    border-radius: 50%;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;

    .dept-icon {
      width: 44rpx;
      height: 36rpx;
    }
  }

  .user-icon-wrap {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
    border-radius: 50%;
    overflow: hidden;
    .user-icon {
      width: 100%;
      height: 100%;
    }
  }

  .dept-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  .user-num {
    font-size: 32rpx;
    font-weight: 500;
    color: #999999;
  }
}

::v-deep {
  .uni-inline-item uni-text:last-child {
    margin: 0;
  }
}

.user-scroll-wrap {
  height: calc(100vh - 120rpx);
}
</style>
